<template>
  <div class="tabbar">
    <!-- 底部选项卡开始 -->
    <mt-tabbar v-model="tab" fixed>
      <mt-tab-item id="index">
        首页
        <img
          src="../../assets/tabbar/index_active.png"
          slot="icon"
          v-if="tab == 'index'"
          alt=""
        />
        <img src="../../assets/tabbar/index.png" slot="icon" alt="" v-else />
      </mt-tab-item>
      <mt-tab-item id="cart">
        购物车
        <img
          src="../../assets/tabbar/cart_active.png"
          slot="icon"
          v-if="tab == 'cart'"
          alt=""
        />
        <img src="../../assets/tabbar/cart.png" slot="icon" alt="" v-else />
      </mt-tab-item>
      <mt-tab-item id="me">
        我的
        <img
          src="../../assets/tabbar/me_active.png"
          slot="icon"
          v-if="tab == 'me'"
          alt=""
        />
        <img src="../../assets/tabbar/me.png" slot="icon" alt="" v-else />
      </mt-tab-item>
    </mt-tabbar>
    <!-- 底部选项卡结束 -->
  </div>
</template>

<style scoped>
  .tabbar{
    width: 100%;
  }
</style>

<script>
export default {
  // 父组件传过来的参数selected
  props: ["selected"],
  data() {
    return {
      tab: this.selected,
    };
  },
  watch: {
    tab(value) {
      switch (value) {
        case "index":
          this.$router.push("/");
          break;
        case "cart":
          this.$router.push("/cart");
          break;
        case "me":
          this.$router.push("/me");
          break;
      }
    },
  },
};
</script>
